<template>
  <view class="evaluate-box solid-bottom">
    <view class="padding-tb-sm flex justify-between align-center">
      <view class="flex">
        <view class="block-80"><image class="round" :src="prop.head_img" mode="aspectFill" lazy-load></image></view>
        <view class="margin-left-sm flex flex-direction justify-between">
          <view class="text-df text-333">{{ prop.user_nickname }}</view>
          <view class="text-sm text-999">{{ prop.create_time }}</view>
        </view>
      </view>
      <view>
        <block v-for="(item, index) in 5" :key="index">
          <image class="block-24" :src="index + 1 <= prop.star ? '@/static/stard2.png' : '@/static/star2.png'" mode="aspectFill"></image>
        </block>
      </view>
    </view>
    <view class="padding-bottom-sm padding-top-sm text-df text-333 text-cut-english">{{ prop.content }}</view>
    <view class="padding-top-xs padding-bottom-sm">
      <view class="grid col-4">
        <block v-for="(ele, index) in prop.video" :key="index">
          <view class="padding-xs wrap-box" @tap="previewVideo(ele)">
            <view class="square-wrap">
              <view class="square-box">
                <image :src="ele + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_300,h_300'" lazy-load mode="aspectFill"></image>
                <view class="play-mask"></view>
                <view class="play-btn"><view class="play-arrow"></view></view>
              </view>
            </view>
          </view>
        </block>
        <view v-for="(ele, index) in prop.thumb" :key="index">
          <view class="padding-xs wrap-box" @tap="preview(ele, index)">
            <view class="square-wrap">
              <view class="square-box">
				  <fu-image :src="ele" mode="aspectFill"></fu-image>
			 </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="text-999 text-df padding-bottom-sm text-cut-2">
      {{prop.key_name}}
    </view>
    <view class="video-mask" v-if="videoShow">
      <view class="padding-left flex align-center" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
        <view class="cuIcon-back text-white" style="font-size: 36rpx;" @click.stop="closeVideo"></view>
      </view>
      <!-- #ifndef MP-WEIXIN -->
      <video
        :src="videoSrc"
        class="myVideo"
        id="myVideo"
        :show-fullscreen-btn="false"
        :style="{ height: 'calc(100% - ' + CustomBar + 'px)' }"
      ></video>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <video
        :src="videoSrc"
        class="myVideo"
        id="myVideo"

        :show-fullscreen-btn="false"
        :show-mute-btn="true"
        :style="{ height: 'calc(100% - ' + CustomBar + 'px)' }"
      ></video>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
/**
 * @author
 * @description 商品评价组件
 * @param {Object} type - 没有用到这个属性，暂定
 * @property {String} temp - 保存当前播放的是哪一个视频的id值+索引
 */
export default {
  props: {
    prop: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      videoContext: null,
      videoShow: false,
      videoSrc:''
    };
  },
  mounted() {
    console.log(this.prop)
  },
  methods: {
    /**
     * @event
     * @description 查看大图
     * @param {Object} item - 图片的信息
     * @param {Number} index - 当前图片的索引
     */
    preview(item, index) {
      uni.previewImage({
        current: index,
        urls: this.prop.thumb
      });
    },
    /**
     * @event
     * @description 查看视频
     * @param {String} j - 视频路径
     * @param {Number} index - 是第几个视频
     * @param {String} el - 保存当前播放的是哪一个视频的id值+索引
     */
    previewVideo(ele) {
      console.log('来了老弟',ele)
      this.videoShow = true;
      // 获取 video 上下文 videoContext 对象
      if (this.videoContext) this.videoContext = null;
      this.videoContext = uni.createVideoContext('myVideo', this);
      this.videoSrc = ele;
      // 开始播放
      setTimeout(() => {
        this.videoContext.play();
      }, 200);
    },
    closeVideo() {
      this.videoContext.pause(); //暂停视频播放事件
      this.videoContext.seek(0);
      this.videoShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap-box {
  background-color: #ffffff;
  .square-wrap {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    box-sizing: border-box;
    position: relative;
    .square-box {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 8rpx;
      .play-mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
      }
      .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        border: 2rpx solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        .play-arrow {
          width: 0;
          height: 0;
          border-top: 18rpx solid transparent;
          border-left: 30rpx solid #ffffff;
          border-bottom: 18rpx solid transparent;
          margin-left: 8rpx;
        }
      }
      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
        position: relative;
        z-index: 98;
      }
    }
  }
}
.block-80 {
  width: 80rpx;
  height: 80rpx;
  min-width: 80rpx;
  min-height: 80rpx;
  background-color: #eeeeee;
  border-radius: 50%;

  image {
    width: 100%;
    height: 100%;
  }
}

.block-24 {
  width: 24rpx;
  height: 24rpx;
  min-width: 24rpx;
  min-height: 24rpx;
}

.text-333 {
  color: #333333;
}

.text-999 {
  color: #999999;
}

.text-cut-english {
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}

/* 300*225 */
.grid-video image {
  width: 150rpx;
  height: 112rpx;
}
.video-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  z-index: 99999;
}
.myVideo {
  width: 750rpx;
}
</style>
